const reactive = Vue.reactive
const ref = Vue.ref
const shallowRef = Vue.shallowRef

/**
 * ref 的结构
 * 属性的深层响应性
 * 
*/
export default {
  name: 'ref-unref',
  template: `
    <div>
      展示 ref <br>
      js 对象：{{obj}} <br><br>
      ref 对象：{{refCount}} <br><br>
      <el-button @click="update" type="primary">修改属性</el-button><br><br>
      <el-button @click="setRef" type="primary">整体赋值</el-button><br><br>
    </div>
  `,
  setup () {
    // 查看 reactive 实例结构
    const refCount = ref(0)
    console.log('refCount ', refCount )

    const refObject = ref({ value: 0 })
    console.log('refObject ', refObject )

    const obj = { value: 'jyk'}

    const sref = shallowRef({ value: {a: 'jyk'} })
    console.log('shallowRef ', sref )

    const update = () => {
      // 修改原型
    }


    const setRef = () => {
      // 直接赋值
      refCount.value += 1
    }

    return {
      obj, // 普通类型
      refCount, // 基础类型
      refObject, // 引用类型
      update, // 修改属性
      setRef // 直接设置
    }
  }
}
  